<template>
  <div class="ETab">
    <div class="tab-main">
      <ul>
        <li :class="{ current: iscurrent[0] }" @click="clickInfo(preIndex, 0)">
          商品介绍
        </li>
        <li :class="{ current: iscurrent[1] }" @click="clickInfo(preIndex, 1)">
          规格与包装
        </li>
        <li :class="{ current: iscurrent[2] }" @click="clickInfo(preIndex, 2)">
          视频介绍
        </li>
        <li :class="{ current: iscurrent[3] }" @click="clickInfo(preIndex, 3)">
          商品评价({{ CommentCountStr }})
        </li>
      </ul>
    </div>
    <div class="tab-con">
      <div class="item" v-show="iscurrent[0]">
        <div class="p-parameter">
          <ul id="parameter-brand" class="p-parameter-list">
            <li>
              品牌：
              <a clstag="shangpin|keycount|product|pinpai_1" target="_blank">{{
                brand
              }}</a>
              <!--a href="#none" class="follow-brand btn-def" clstag='shangpin|keycount|product|guanzhupinpai'><b>&hearts;</b>关注 -->
            </li>
          </ul>

          <div class="nocontent" v-show="productinfo.length == 0">
            <p>暂时没有商品的相关介绍哦。</p>
            <p>您可以看看其他参数的相关介绍哦</p>
          </div>

          <ul
            class="parameter2 p-parameter-list"
            v-if="productinfo.length != 0"
          >
            <li
              v-for="(item, index) in product_info"
              :key="index"
              :title="item"
            >
              {{ item }}
            </li>
          </ul>
        </div>
      </div>
      <div class="item" v-show="iscurrent[1]">
        <div class="Ptable">
          <div class="nocontent" v-if="ptableinfo.length == 0">
            <p>暂时没有规格与包装的相关介绍哦。</p>
            <p>您可以看看其他参数的相关介绍哦</p>
          </div>
          <div
            class="Ptable-item"
            v-for="(item, index) in ptable"
            :key="index"
            v-show="ptableinfo.length != 0"
          >
            <h3>{{ Object.keys(item)[0] }}</h3>
            <dl>
              <dl v-for="(key, va, ins) in Object.values(item)[0]" :key="ins">
                <dt>{{ va }}</dt>
                <dd>{{ key }}</dd>
              </dl>
            </dl>
          </div>
          <div class="package-list">
            <h3>包装清单</h3>
            <p>
              {{ packItems }}
            </p>
          </div>
        </div>
      </div>
      <div class="item" v-show="iscurrent[2]">
        <div class="imagandvideo" id="imagandvideo">
          <div class="nocontent" v-show="imgurl == ''">
            <p>暂时没有图片和视频的相关介绍哦。</p>
            <p>您可以看看其他参数的相关介绍哦</p>
          </div>
          <div v-show="imgurl">
            <div class="itemvideo">
              <video
                id="myVideo"
                class="video-js vjs-big-play-centered vjs-fluid"
                controls
                preload="auto"
                width="100%"
                height="100%"
              >
                <source type="video/mp4" :src="videourl" />
              </video>
            </div>
            <div class="itemimg">
              <el-image :src="imgurl" :preview-src-list="imgurlarry">
              </el-image>
            </div>
          </div>
        </div>
      </div>
      <div class="item" v-show="iscurrent[3]">
        <div class="m m-content comment">
          <div class="mt"><h3>商品评价</h3></div>
          <div class="mc">
            <div class="comment-info">
              <div class="comment-percent">
                <strong class="percent-tit">好评度</strong>
                <div class="percent-con">{{ GoodRateShow }}<span>%</span></div>
              </div>
              <div class="percent-info">
                <div class="notag" v-if="ccontent.length == 0">
                  此商品暂时还没有买家印象哦~
                </div>
                <div class="tag-list tag-available" v-if="ccontent.length != 0">
                  <span
                    class="tag-1"
                    v-for="(item, index) in ccontent"
                    :key="index"
                    >{{ item }}</span
                  >
                </div>
              </div>
            </div>
            <div class="comments-list">
              <div class="tab-main small">
                <ul class="filter-list">
                  <li class="current">
                    <a href="javascript:;"
                      >全部评价<em>{{ CommentCountStr }}</em></a
                    >
                  </li>
                  <li>
                    <a href="javascript:;"
                      >视屏晒单<em>({{ VideoCountStr }})</em></a
                    >
                  </li>
                  <li>
                    <a href="javascript:;"
                      >追评<em>({{ AfterCountStr }})</em></a
                    >
                  </li>
                  <li>
                    <a href="javascript:;"
                      >好评<em>({{ GoodCountStr }})</em></a
                    >
                  </li>
                  <li>
                    <a href="javascript:;"
                      >中评<em>({{ GeneralCountStr }})</em></a
                    >
                  </li>
                  <li>
                    <a href="javascript:;"
                      >差评<em>({{ PoorCountStr }})</em></a
                    >
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: [
    "imageAndVideo",
    "product_info",
    "ptable",
    "comment",
    "commentcontent",
    "brand",
    "packItems",
  ],
  data() {
    return {
      iscurrent: [true, false, false, false],
      preIndex: 0,
      productinfo: [],
      ptableinfo: [],
      imageAndVideourl: [],
      CommentCountStr: "",
      GoodRateShow: "",
      VideoCountStr: "",
      AfterCountStr: "",
      GoodCountStr: "",
      GeneralCountStr: "",
      PoorCountStr: "",
      ccontent: "",
      imgurl: "",
      imgurlarry: [],
      videourl: "",
    };
  },
  computed: {
    //当video中存在source标签的时候，浏览器渲染之后会自动去获取地址，即便地址改变，浏览器也不会再去获取地址。
    //但是通过动态的插入source标签的方式，可以触发浏览器进行重排，从而去获取相应地址的文件进行播放。
  },
  methods: {
    clickInfo(preIndex, nowIndex) {
      this.$set(this.iscurrent, preIndex, false);
      this.$set(this.iscurrent, nowIndex, true);
      this.preIndex = nowIndex;
    },
    fetchJSON_comment98() {},
    initVideo() {
      //此处初始化的调用，我放在了获取数据之后的方法内，而不是放在钩子函数mounted
      //页面dom元素渲染完毕，执行回调里面的方法
      this.$nextTick(() => {
        this.$video(document.getElementById("myVideo"), {
          //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
          controls: true,
          //自动播放属性,muted:静音播放
          autoplay: false,
          //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
          preload: "auto",
          //设置视频播放器的显示宽度（以像素为单位）
          // width: "800px",
          //设置视频播放器的显示高度（以像素为单位）
          // height: "400px",
          controlBar: {
            playToggle: true,
          },
        });
      });
    },
  },
  mounted() {
    setTimeout(() => {
      this.productinfo = this.product_info;
      this.ptableinfo = this.ptable;
      this.CommentCountStr = this.comment[0].CommentCountStr;
      this.GoodRateShow = this.comment[0].GoodRateShow;
      this.VideoCountStr = this.comment[0].VideoCountStr;
      this.AfterCountStr = this.comment[0].AfterCountStr;
      this.GoodCountStr = this.comment[0].GoodCountStr;
      this.GeneralCountStr = this.comment[0].GeneralCountStr;
      this.PoorCountStr = this.comment[0].PoorCountStr;
      this.ccontent = this.commentcontent;
      this.imageAndVideourl = this.imageAndVideo;
      if (this.imageAndVideo.length != 0) {
        this.imgurl = this.imageAndVideo[1];
        this.imgurlarry.push(this.imgurl);
        this.initVideo();
        this.videourl = this.imageAndVideo[0];
      }
    }, 200);
  },
};
</script>

<style scoped>
</style>